<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 100vw;
            height: 100vh;
            background: url(./public/logo.png);
            background-size: cover;
        }

        .box {
            width: 1920px;
            height: 1080px;
            background-color: red;
            position: fixed;
            left: 50%;
            top: 50%;
            transform-origin: left top;
        }

        .top {
            width: 100px;
            height: 100px;
            background: hotpink;
            margin-left: 50px;
        }

        .bottom {
            width: 100px;
            height: 100px;
            background: skyblue;
            margin-left: 50px;
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 数据展示区域 -->
        <div class="box">
            <div class="top">孙悟空</div>
            <div class="bottom">猪八戒</div>
        </div>
    </div>

</body>

</html>
<script>
    // // 控制数据大屏的放大与缩小
    // let box = document.querySelector('.box');
    // box.style.transform = `scale(${getScale()}) translate(-50%, -50%)`
    // // 计算缩放的比例
    // function getScale(w = 1920, h = 1080) {
    //     let ww = window.innerWidth / w;
    //     let wh = window.innerHeight / h;
    //     return ww < wh ? ww : wh;
    // }
    // // 视窗移动时，触发
    // window.onresize = () => {
    //     box.style.transform = `scale(${getScale()}) translate(-50%, -50%)`
    // }

    // // 数组使用for-of遍历
    // const arr = [1, 2, 3, 4, 5]
    // for (let [index, item] of arr.entries()) {
    //     console.log(index, item);
    // }
    // console.log(arr.entries());

    // 路由获取测试
    const routes = ['Product', 'Spu', 'Sku'];
    const asyncRoutes = [
        {
            path: '/acl',
            name: 'Acl',
            component: () => import('@/layout/index.vue'),
            meta: {
                title: '权限管理',
                hidden: false,
                icon: 'Lock'
            },
            redirect: '/acl/user',
            children: [
                {
                    path: '/acl/user',
                    name: 'User',
                    component: () => import('@/views/acl/user/inedx.vue'),
                    meta: {
                        title: '用户管理',
                        hidden: false,
                        icon: 'User'
                    }
                },
                {
                    path: '/acl/role',
                    name: 'Role',
                    component: () => import('@/views/acl/role/index.vue'),
                    meta: {
                        title: '角色管理',
                        hidden: false,
                        icon: 'UserFilled'
                    }
                },
                {
                    path: '/acl/permisison',
                    name: 'Permission',
                    component: () => import('@/views/acl/permission/index.vue'),
                    meta: {
                        title: '菜单管理',
                        hidden: false,
                        icon: 'Monitor'
                    }
                },
            ]
        },
        {
            path: '/product',
            name: 'Product',
            component: () => import('@/layout/index.vue'),
            meta: {
                title: '商品管理',
                hidden: false,
                icon: 'Goods'
            },
            redirect: '/product/trademark',
            children: [
                {
                    path: '/product/trademark',
                    name: 'Trademark',
                    component: () => import('@/views/product/trademark/index.vue'),
                    meta: {
                        title: '品牌管理',
                        hidden: false,
                        icon: 'ShoppingCartFull'
                    }
                },
                {
                    path: '/product/attr',
                    name: 'Attr',
                    component: () => import('@/views/product/attr/index.vue'),
                    meta: {
                        title: '属性管理',
                        hidden: false,
                        icon: 'ChromeFilled'
                    }
                },
                {
                    path: '/product/spu',
                    name: 'Spu',
                    component: () => import('@/views/product/spu/index.vue'),
                    meta: {
                        title: 'spu管理',
                        hidden: false,
                        icon: 'Calendar'
                    }
                },
                {
                    path: '/product/sku',
                    name: 'Sku',
                    component: () => import('@/views/product/sku/index.vue'),
                    meta: {
                        title: 'sku管理',
                        hidden: false,
                        icon: 'Orange'
                    }
                },
            ]
        },
    ]

    let newRoute = getRoutes(asyncRoutes, routes);
    console.log(newRoute);
    

    function getRoutes(asyncRoutes, routes) {
        return asyncRoutes.filter((item) => {
            if (routes.includes(item.name)) {
                if (item.children && item.children.length > 0) {
                    item.children = getRoutes(item.children, routes);
                }
                return item;
            }
        })
    }
</script>